HAMPU 初期構想
from HAMPU：同人誌頒布管理Webアプリ
2023/10/1
Todo
Remixのチュートリアルをやる
/villagepump/雑に見るUp and Running with Remix
デザインとアニメーションを無視して動くモックをつくる
データセーブはローカルストレージ
本の追加
タップでカウントアップ
長押しでカウントダウン
https://qiita.com/t_enderman/items/9cdc976f7f323618bb0b
2023/8/14
要件
スマホでワンボタンで売り上げ入力ができる
売り上げ冊数のカウンターが増える
時刻が記録できる
やり直しができる
手動で時刻入力もできる
複数の本が買われた時に素早く入力できる
本の情報が入力できる
後からイベント時のグラフが表示できる
累積売り上げグラフ
5分間平均部数記録
Webアプリでやりたい
よかったら誰でも使えるように公開したい
ググってでてきたアプリはそういうものはなかった
https://stock-management.interimadd.com/
UI設計
考察
最も単純なUIを考える。本が買われたら買われたボタンを押すだけのもの
https://gyazo.com/c579dbc4b16ad40f7d372aedde3061cc
履歴が出てきて消せる
このUIの課題：本がたくさんある時に切り替えがめんどくさい
方法はいくつかある
簡単に切り替えるUIをつくる
最初から全てのUIを出す(切り替えなし)
素早い切り替えUIをどうすればいいだろうか？
https://gyazo.com/11c704b91a5cd3ab145161c6f123c3ca
左：ボタンを押したら画面下から本の表紙がいっぱい展開されて押すと切り替えられる方式
例：Hey
右：UI表示ボタンを押したらその周りに本が出てきて、そちらの方向に指を移動すると本が選択される
このUIの課題：3冊の本が買われた時にいちいち切り替えるのは面倒
そもそも切り替えないで画面上に表示させるUIにすることにする
https://gyazo.com/719277a01f9ed2b2360b293f23857a79
Koala samplerのような感じで上にデータ表示をさせれば編集も画面繊維なくできるので良いだろう
削除は上の詳細画面でできればとりあえずいいだろう
（オプション）アニメーション設計
Riveを使うと動かせるらしい？
https://rive.app/blog/figma-s-new-homepage-is-full-of-rive-animations
https://rive-app.github.io/rive-react/?path=/docs/react-runtime-overview--rive-component
https://rive.app/use-cases
タップでカウントアップするときにこういう感じに楽しげ＆気持ちよくしたい
https://gyazo.com/8b938c472dea973430cdacada6879c5a
長押しする時に消えそうなアニメーションになってほしい
https://gyazo.com/ab947b64765b76399f8e123ba596e620
画面設計
Figma（デザインツール）
2024/8/25 このようなアプリを作らなくても、Shortcut appで同様の仕組みを構築できると思う
ただしグラフは自分で作る必要がある